<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="pay_top">
			<view class="pay_tit">
				<text>支付成功</text>
				<text>congratulation</text>
			</view>
		</view>
		<!-- 下方缴费列表 -->
		<view class="pay_list">
			
			<view class="pay_list_top">
				<text class="top_df" v-if="billData.feeType==1">电费缴纳：￥</text>
				<text class="top_df"  v-if="billData.feeType==2">水费缴纳：￥</text>
				<text class="top_df" v-if="billData.feeType==3">物业费缴纳：￥</text>
				<text class="top_je">{{billData.paymentMoney}}</text>
			</view>
			
			<view class="pay_list_con">
				<view class="con_item">
					<text>缴费人:</text>
					<text>{{billData.username}}</text>
				</view>
				
				<view class="con_item">
					<text>缴费金额:</text>
					<text>{{billData.paymentMoney}}元</text>
				</view>
				
				<view class="con_item">
					<text>缴费类型:</text>
					<text v-if="billData.feeType==1">电费</text>
					<text v-if="billData.feeType==2">水费</text>
					<text v-if="billData.feeType==3">物业费</text>
				</view>
				
				<view class="con_item">
					<text>支付方式:</text>
					<text v-if="billData.pay_type==1">微信</text>
					<text v-if="billData.pay_type==2">微信</text>
					<text v-if="billData.pay_type==3">支付宝</text>
				</view>
			</view>
			
			<view class="pay_list_foo">
				<view class="con_item">
					<text>订单编号:</text>
					<text>{{billData.pay_no}}</text>
				</view>
				<view class="con_item">
					<text>交易时间:</text>
					<text>{{billData.paymentTime}}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部客服 -->
		<!-- <view class="service">
			<image class="service_img" :src="imgUrl+'/static/wap/img/kefu@2x.png'"></image>
			<text class="service_txt">联系客服</text>
		</view> -->
	</view>
</template>

<script>
	import util from '../../static/util.js'
	export default {
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				id:'',
				billData:'',
				type:''
			};
		},
		onLoad(opt) { 
			console.log(opt)
			this.id=opt.id;
			this.billdetails()
			this.type=opt.type
		},
		methods:{
			billdetails(){
				var that=this;
				that.ajax({
					url:'api/bill/bill_details',
					data:{
						order_id:that.id
					},
					success:function(res){
						that.billData=res.data;
						
					}
				  })
			}
		},
		onBackPress(e) {  
						// 这里可以自定义返回逻辑，比如下面跳转其他页面
		    console.log('监听返回按钮')
			if(this.type){
				
			}else{
				uni.switchTab({
					url:'../index/index'
				})
				return true;
			}

					// return true 表示禁止默认返回
			 
		}, 
	}
</script>

<style lang="less" scoped>
	.pay_top{
		position: relative;
		height: 336rpx;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/xiangqing_bg@2x.png) no-repeat;
		background-size: 100% 100%;
		.pay_tit{
			position: absolute;
			left: 60%;
			top: 38%;
			transform: translate(-50%, -50%);
			width: 240rpx; 
			font-size: 46rpx;
			color: #fff; 
			& text:nth-child(2) {
				font-size: 28rpx;
				letter-spacing: 0.2em;
				opacity: 0.4;
			}
		}
	}
	// 下方列表
	.pay_list{
		position: relative;
		padding: 0 39rpx;
		top: -72rpx;
		// height: 960rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background-color: #fff;
		.pay_list_top{
			font-size: 48rpx;
			color: #2AABAD;
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;
			border-bottom: 2rpx solid #E4E4E4;
			/* opacity: 0.3; */
			.top_je{
				font-size: 60rpx;
			}
		}
		.pay_list_con{ 
			font-size: 30rpx;
			color: #333;
			border-bottom: 2rpx dashed #909090 ;
			.con_item{
				margin: 40rpx 0;
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx; 
				& text:first-child{
					color: #999;
				}
			}
		}
		.pay_list_foo{
			font-size: 30rpx;
			color: #333;
			.con_item{
				margin: 40rpx 0;
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				line-height: 60rpx; 
				& text:first-child{
					color: #999;
				}
			}
		}
	}
	
	.service{ 
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		color: #969696; 
		.service_img {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
